<template>
	<div class="page success">
		<x-header 
			class="title"
			:left-options="{backText: ''}">发票查验</x-header>

		<div class="invalid" v-if="invalid"></div>
		<div class="receipt-wrap">
			<div class="receipt-title text-orange">增值税{{invoiceType}}</div>
			<div class="receipt-flex">
				<div class="receipt-label text-orange">发票代码:</div>
				<div class="receipt-val">{{invoiceCode}}</div>
			</div>
			<div class="receipt-flex">
				<div class="receipt-label text-orange">发票号码:</div>
				<div class="receipt-val">{{invoiceNum}}</div>
			</div>
			<div class="receipt-flex">
				<div class="receipt-label text-orange">开票日期:</div>
				<div class="receipt-val">{{invoiceDate}}</div>
			</div>
			<!-- 分割线 -->
			<div class="divider-line"></div>
			
			<div class="receipt-flex">
				<div class="receipt-label text-orange">购方名称:</div>
				<div class="receipt-val">{{buyerName}}</div>
			</div>
			<div class="receipt-flex">
				<div class="receipt-label text-orange">购方税号:</div>
				<div class="receipt-val">{{buyerTaxNum}}</div>
			</div>

			<div class="divider-line"></div>

			<div class="receipt-flex">
				<div class="receipt-label text-orange">销方名称:</div>
				<div class="receipt-val">{{salerName}}</div>
			</div>
			<div class="receipt-flex">
				<div class="receipt-label text-orange">销方税号:</div>
				<div class="receipt-val">{{salerTaxNum}}</div>
			</div>
			
			<div class="divider-line"></div>

			<div class="receipt-flex">
				<div class="receipt-label text-orange">金额:</div>
				<div class="receipt-val">{{noTaxAmount}}元</div>
			</div>
			<div class="receipt-flex">
				<div class="receipt-label text-orange">税额:</div>
				<div class="receipt-val">{{taxAmount}}元</div>
			</div>
			<div class="receipt-flex">
				<div class="receipt-label text-orange">价税合计:</div>
				<div class="receipt-val">{{totalTaxAmount}}元</div>
			</div>
		</div>
		<p class="tips fz-12 text-center">特别提示：本平台仅提供所查询发票票面信息的查验结果</p>
	</div>
</template>

<script>
import {XHeader} from 'vux';
import store from 'store';
import {ajaxDomain, routerDomain} from '../config/config';

export default {
	name: 'success',
	components: {
		XHeader
	},
	data () {
		return {
			invalid: false,

			// invoiceType: '普通',
			// invoiceCode: '223232322',
			// invoiceNum: '32742131',
			// invoiceDate: '2017-09-09',
			// buyerName: '北京爱信诺航天信息有限公司',
			// buyerTaxNum: '92222339029083989',
			// salerName: '北京爱信诺航天信息有限公司',
			// salerTaxNum: '92222339029083989',
			invoiceType: '',
			invoiceCode: '',
			invoiceNum: '',
			invoiceDate: '',
			buyerName: '',
			buyerTaxNum: '',
			salerName: '',
			salerTaxNum: '',
			noTaxAmount: 0,
			taxAmount: 0,
			totalTaxAmount: 0
		}
	},
	created () {
		var invoice = store.get('invoice');
		console.log(invoice)
		// s:专票;c:普票;p:电子票;j:机动车辆;h:货运发票;f:卷式发票
		var invoiceType = invoice.invoiceType;
		if (invoiceType == 's') {
			this.invoiceType = '专用发票';
		} else if (invoiceType == 'c') {
			this.invoiceType = '普通发票';
		} else if (invoiceType == 'p') {
			this.invoiceType = '电子普通发票';
		} else if (invoiceType == 'j') {
			this.invoiceType = '机动车销售统一发票';
		} else if (invoiceType == 'f') {
			this.invoiceType = '卷式发票';
		} else if (invoiceType == 'h') {
			this.invoiceType = '货运发票';
		}
		this.invoiceCode = invoice.invoiceCode;
		this.invoiceNum = invoice.invoiceNum;
		this.invoiceDate =  invoice.invoiceDate;
		this.buyerName =  invoice.buyerName;
		this.buyerTaxNum =  invoice.buyerTaxNum;
		this.salerName =  invoice.salerName;
		this.salerTaxNum =  invoice.salerTaxNum;
		this.noTaxAmount =  invoice.noTaxAmount;
		this.taxAmount = invoice.taxAmount;
		this.totalTaxAmount = invoice.totalTaxAmount;
		// 发票是否作废
		if (invoice.isCancel !== 'N') {
			this.invalid = true;
		}
	}
}
</script>

<style>
	.receipt-wrap {
		position: relative;
		margin: 14px auto 0;
		padding: 30px 20px 15px;
		width: 92%;
		height: auto;
		background: url('../assets/images/receipt-bg.png') no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
	}
	.invalid {
		position: absolute;
		margin-left: -74px;
		top: 70px;
		left: 50%;
		width: 148px;
		height: 148px;
		background: url('../assets/images/invalid.png') no-repeat;
		z-index: 10;
	}
	.receipt-title {
		margin-bottom: 30px;
		font-size: 16px;
		font-weight: 600;
		text-align: center;
	}
	.receipt-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		line-height: 28px;
		word-break: break-all;
	}
	.receipt-flex .receipt-label {
		flex: 0 0 65px;
	}
	.receipt-flex .receipt-val {
		color: #4C4C4C;
		text-align: right;
	}
	.divider-line {
		margin: 8px 0;
		border: 1px dashed #F0F0F0;
	}
</style>
